<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>现代化侧边栏菜单 - ElementUI美化</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    }
    
    body {
      background-color: #f5f7fa;
      overflow: hidden;
    }
    
    .app-container {
      display: flex;
      height: 100vh;
      overflow: hidden;
    }
    
    /* 侧边栏样式 - 主要修改区域 */
    .sidebar {
      width: 240px;
      height: 100%;
      background: linear-gradient(180deg, #1a2a4f 0%, #0d1a33 100%);
      box-shadow: 3px 0 15px rgba(0, 0, 0, 0.2);
      display: flex;
      flex-direction: column;
      z-index: 10;
      transition: all 0.3s ease;
    }
    
    .logo-container {
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .logo-image {
      width: 42px;
      height: 42px;
      background: linear-gradient(135deg, #4a9eff, #6c5ce7);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 20px;
      box-shadow: 0 4px 10px rgba(74, 158, 255, 0.3);
    }
    
    .logo-title {
      color: white;
      font-size: 20px;
      font-weight: 600;
      margin-left: 12px;
      letter-spacing: 0.5px;
    }
    
    /* 自定义菜单样式 */
    .custom-menu {
      background-color: transparent !important;
      border: none;
      padding: 20px 10px;
      flex: 1;
    }
    
    .custom-menu .el-menu-item {
      height: 56px;
      line-height: 56px;
      margin: 8px 0;
      border-radius: 8px;
      color: #a4b1cd !important;
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      display: flex;
      align-items: center;
      padding-left: 20px !important;
      position: relative;
      overflow: hidden;
      background: transparent !important;
    }
    
    .custom-menu .el-menu-item:hover {
      background: rgba(74, 158, 255, 0.15) !important;
      color: #fff !important;
      transform: translateX(5px);
    }
    
    .custom-menu .el-menu-item:hover .menu-icon {
      color: #4a9eff !important;
      transform: scale(1.15);
    }
    
    .custom-menu .el-menu-item.is-active {
      background: linear-gradient(90deg, rgba(74, 158, 255, 0.3), transparent) !important;
      color: #fff !important;
      border-left: 4px solid #4a9eff;
    }
    
    .custom-menu .el-menu-item.is-active .menu-icon {
      color: #4a9eff !important;
    }
    
    .menu-icon {
      font-size: 20px !important;
      margin-right: 16px;
      transition: all 0.3s ease;
      width: 24px;
      text-align: center;
    }
    
    .menu-text {
      font-size: 15px;
      font-weight: 500;
      letter-spacing: 0.3px;
    }
    
    .menu-item-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, rgba(74, 158, 255, 0.1), transparent);
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: -1;
    }
    
    .el-menu-item:hover .menu-item-bg {
      opacity: 1;
    }
    
    /* 主内容区域样式 */
    .main-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    
    .el-header {
      background: white;
      height: 70px !important;
      display: flex;
      align-items: center;
      padding: 0 30px;
      border-bottom: 1px solid #eaeef5;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }
    
    .header-title {
      font-size: 22px;
      font-weight: 600;
      color: #2c3e50;
    }
    
    .header-actions {
      margin-left: auto;
      display: flex;
      gap: 20px;
    }
    
    .header-action-btn {
      background: #f5f7fa;
      border: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      color: #5a6d8a;
    }
    
    .header-action-btn:hover {
      background: #4a9eff;
      color: white;
      transform: translateY(-2px);
    }
    
    .el-main {
      padding: 25px;
      background-color: #f5f7fa;
      overflow: auto;
    }
    
    .tabs-container {
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
      overflow: hidden;
    }
    
    .el-tabs__header {
      margin: 0 !important;
      background: linear-gradient(90deg, #f9fbfd, #ffffff);
      border-bottom: 1px solid #eaeef5;
    }
    
    .el-tabs__item {
      font-weight: 500;
      padding: 0 25px !important;
      height: 45px !important;
      line-height: 45px !important;
    }
    
    .tab-content {
      padding: 30px;
      min-height: 300px;
    }
    
    .content-title {
      font-size: 24px;
      color: #2c3e50;
      margin-bottom: 25px;
    }
    
    .content-card {
      background: white;
      border-radius: 12px;
      padding: 25px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      margin-bottom: 25px;
    }
    
    .card-header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
    
    .card-icon {
      width: 50px;
      height: 50px;
      border-radius: 12px;
      background: linear-gradient(135deg, #4a9eff, #6c5ce7);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 22px;
      margin-right: 15px;
    }
    
    .card-title {
      font-size: 20px;
      font-weight: 600;
      color: #2c3e50;
    }
    
    .stats-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }
    
    .stat-card {
      background: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
      display: flex;
      flex-direction: column;
      transition: transform 0.3s ease;
    }
    
    .stat-card:hover {
      transform: translateY(-5px);
    }
    
    .stat-title {
      color: #5a6d8a;
      font-size: 14px;
      margin-bottom: 10px;
    }
    
    .stat-value {
      font-size: 28px;
      font-weight: 700;
      color: #2c3e50;
      margin-bottom: 5px;
    }
    
    .stat-trend {
      display: flex;
      align-items: center;
      color: #4cd964;
      font-size: 14px;
      font-weight: 500;
    }
    
    .footer {
      text-align: center;
      padding: 20px;
      color: #7f8c9a;
      font-size: 14px;
      border-top: 1px solid #eaeef5;
      background: white;
    }
    
    /* 响应式调整 */
    @media (max-width: 992px) {
      .sidebar {
        width: 70px;
      }
      
      .logo-title, .menu-text {
        display: none;
      }
      
      .logo-container {
        justify-content: center;
      }
      
      .custom-menu .el-menu-item {
        justify-content: center;
        padding-left: 0 !important;
      }
      
      .menu-icon {
        margin-right: 0;
        font-size: 22px !important;
      }
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .content-card {
      animation: fadeIn 0.5s ease-out;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="app-container">
      <!-- 侧边栏区域 -->
      <el-aside class="sidebar">
        <div class="logo-container">
          <div class="logo-image">
            <i class="fas fa-heartbeat"></i>
          </div>
          <div class="logo-title">健康管理中心</div>
        </div>
        
        <el-menu
          @select="addTab"
          default-active="PersonnelList"
          class="custom-menu"
        >
          <el-menu-item index="PersonnelList">
            <i class="fas fa-user-friends menu-icon"></i>
            <span class="menu-text">体检人员</span>
            <div class="menu-item-bg"></div>
          </el-menu-item>
          <el-menu-item index="Reports">
            <i class="fas fa-file-medical menu-icon"></i>
            <span class="menu-text">体检报告</span>
            <div class="menu-item-bg"></div>
          </el-menu-item>
          <el-menu-item index="Statistics">
            <i class="fas fa-chart-line menu-icon"></i>
            <span class="menu-text">数据统计</span>
            <div class="menu-item-bg"></div>
          </el-menu-item>
          <el-menu-item index="Settings">
            <i class="fas fa-cog menu-icon"></i>
            <span class="menu-text">系统设置</span>
            <div class="menu-item-bg"></div>
          </el-menu-item>
        </el-menu>
      </el-aside>
      
      <!-- 主内容区域 -->
      <div class="main-container">
        <el-header>
          <div class="header-title">{{ currentTitle }}</div>
          <div class="header-actions">
            <div class="header-action-btn">
              <i class="fas fa-bell"></i>
            </div>
            <div class="header-action-btn">
              <i class="fas fa-cog"></i>
            </div>
            <div class="header-action-btn">
              <i class="fas fa-user"></i>
            </div>
          </div>
        </el-header>
        
        <el-main>
          <div class="tabs-container">
            <el-tabs v-model="activeTab" type="card" closable @tab-remove="removeTab">
              <el-tab-pane
                v-for="tab in tabs"
                :key="tab.name"
                :label="tab.title"
                :name="tab.name"
              >
                <div class="tab-content">
                  <div class="content-title">{{ tab.title }}管理</div>
                  
                  <div class="content-card">
                    <div class="card-header">
                      <div class="card-icon">
                        <i :class="tab.icon"></i>
                      </div>
                      <div class="card-title">数据概览</div>
                    </div>
                    
                    <div class="stats-container">
                      <div class="stat-card">
                        <div class="stat-title">总记录数</div>
                        <div class="stat-value">{{ tab.stats.total }}</div>
                        <div class="stat-trend">
                          <i class="fas fa-arrow-up"></i>
                          <span>12% 增长</span>
                        </div>
                      </div>
                      <div class="stat-card">
                        <div class="stat-title">本月新增</div>
                        <div class="stat-value">{{ tab.stats.monthly }}</div>
                        <div class="stat-trend">
                          <i class="fas fa-arrow-up"></i>
                          <span>8% 增长</span>
                        </div>
                      </div>
                      <div class="stat-card">
                        <div class="stat-title">今日处理</div>
                        <div class="stat-value">{{ tab.stats.daily }}</div>
                        <div class="stat-trend">
                          <i class="fas fa-arrow-down"></i>
                          <span>3% 减少</span>
                        </div>
                      </div>
                      <div class="stat-card">
                        <div class="stat-title">完成率</div>
                        <div class="stat-value">{{ tab.stats.completion }}%</div>
                        <div class="stat-trend">
                          <i class="fas fa-arrow-up"></i>
                          <span>5% 增长</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <div class="content-card">
                    <div class="card-header">
                      <div class="card-icon">
                        <i class="fas fa-list"></i>
                      </div>
                      <div class="card-title">最近记录</div>
                    </div>
                    <p>这里显示{{ tab.title }}的最近记录列表...</p>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-main>
        
        <div class="footer">
          健康管理系统 © 2023 版权所有 | 版本号 v2.1.5
        </div>
      </div>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          activeTab: 'PersonnelList',
          tabs: [],
          componentMap: {
            PersonnelList: {
              title: "体检人员",
              icon: "fas fa-user-friends",
              stats: { total: 1242, monthly: 86, daily: 12, completion: 92 }
            },
            Reports: {
              title: "体检报告",
              icon: "fas fa-file-medical",
              stats: { total: 986, monthly: 72, daily: 8, completion: 87 }
            },
            Statistics: {
              title: "数据统计",
              icon: "fas fa-chart-line",
              stats: { total: 24, monthly: 3, daily: 0, completion: 100 }
            },
            Settings: {
              title: "系统设置",
              icon: "fas fa-cog",
              stats: { total: 12, monthly: 1, daily: 0, completion: 100 }
            }
          }
        };
      },
      computed: {
        currentTitle() {
          const tab = this.tabs.find(t => t.name === this.activeTab);
          return tab ? `${tab.title}管理` : '健康管理系统';
        }
      },
      created() {
        this.addTab('PersonnelList');
      },
      methods: {
        addTab(name) {
            console.log(name);
          if (!this.tabs.find((tab) => tab.name === name)) {
            this.tabs.push({
              name,
              title: this.componentMap[name].title,
              icon: this.componentMap[name].icon,
              stats: this.componentMap[name].stats
            });
          }
          this.activeTab = name;
        },
        removeTab(name) {
          if (this.tabs.length <= 1) return;
          
          const index = this.tabs.findIndex((tab) => tab.name === name);
          this.tabs.splice(index, 1);
          if (this.activeTab === name) {
            this.activeTab = this.tabs[Math.max(index - 1, 0)].name;
          }
        }
      }
    });
  </script>
</body>
</html>